<template>
  <div id="app" class="studentReportSemester">
    <sk-table-header ref="skTableHeader" @dataFrom="getDataFrom" @export="handleDownload"></sk-table-header>
  
    <a-card :bordered="false" id="reportAreaSem">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          {{ semesterName }}-{{className}}-数据报告
        </div>
      </div>
      <a-spin tip="正在导出..." :spinning="spinning">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="1. 幼儿考勤统计">
            <work ref="workRef" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['1']" @ok="handleOk"></work>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="2. 身高体重统计">
            <height-weight ref="heightWeight" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['2']" @ok="handleOk"></height-weight>
          </a-collapse-panel>
          <a-collapse-panel key="3" header="3. 体温服药统计">
            <temp-medicine ref="tempMedicine" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['3']" @ok="handleOk"></temp-medicine>
          </a-collapse-panel>
          <a-collapse-panel key="4" header="4. 运动区域统计">
            <sport-area ref="SportArea" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['4']" @ok="handleOk"></sport-area>
          </a-collapse-panel>
          <a-collapse-panel key="5" header="5. 生活作息统计">
            <life ref="life" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['5']" @ok="handleOk"></life>
          </a-collapse-panel>
          <a-collapse-panel key="6" header="6. 成长评价统计">
            <evaluate ref="evaluate" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['6']" @ok="handleOk"></evaluate>
          </a-collapse-panel>
          <a-collapse-panel key="7" header="7. 精彩瞬间统计">
            <moments ref="moments" :dataForm="dataForm" :semesterName="semesterName" :className="className" :stuName="stuName" v-if="showView['7']" @ok="handleOk"></moments>
          </a-collapse-panel>
        </a-collapse>
      </a-spin>
    </a-card>
  </div>
</template>
<script>

import html2canvas from "html2canvas" //网页转换为图片
import skTableHeader from './semester/skTableHeader'
import work from "./semester/work.vue"
import HeightWeight from "./semester/heightWeight.vue"
import TempMedicine from "./semester/tempMedicine.vue";
import SportArea from "./semester/sportArea.vue";
import Life from "./semester/life.vue";
import evaluate from "./semester/evaluate.vue";
import moments from "./semester/moments.vue";
export default
{
  name: 'studentReportSemester',
  components: {
    skTableHeader,
    work,
    HeightWeight,
    TempMedicine,
    SportArea,
    Life,
    evaluate,
    moments
  },
  props:[],
  data() {
    return {
      activeKey:['1'],
      showView: {
        '1':false,
        '2':false,
        '3':false,
        '4':false,
        '5':false,
        '6':false,
        '7':false,
      },
      dataForm: {
      },
      semesterName: '',
      className: '',
      stuName: '',
      exportList:[],
      exportFlag:false,
      spinning:false,
    }
  },
  filters: {},
  
  computed: {},
  
  created() {
  },
  
  activated() {
  },
  
  watch: {
    activeKey(key) {
      const lastKey = this.activeKey[this.activeKey.length-1]
      this.showView[lastKey] = true
    },
  },
  mounted() {
  },

  methods: {
    // 获取参数
    getDataFrom(dataForm){
      this.dataForm = dataForm
      this.semesterName = dataForm.semester.semesterName
      this.stuName = dataForm.stuName ? dataForm.stuName : ''
      if (dataForm.classId != '') {
        const c = dataForm.classList.find(c => c.id == dataForm.classId)
        this.className = (c ? c.className : '') + ' ' + this.stuName
      } else {
        this.className = '' + ' ' + this.stuName
      }
      console.log('dataForm', dataForm);
      this.showActiveKey();
    },
    showActiveKey(){
      this.showView['1'] = this.activeKey.findIndex(key => key == '1') > -1
      this.showView['2'] = this.activeKey.findIndex(key => key == '2') > -1
      this.showView['3'] = this.activeKey.findIndex(key => key == '3') > -1
      this.showView['4'] = this.activeKey.findIndex(key => key == '4') > -1
      this.showView['5'] = this.activeKey.findIndex(key => key == '5') > -1
      this.showView['6'] = this.activeKey.findIndex(key => key == '6') > -1
      this.showView['7'] = this.activeKey.findIndex(key => key == '7') > -1
      this.$nextTick(()=>{
        this.activeKey.forEach(key => {
          switch(key){
            case '1':
              this.$refs.workRef.load();
              break;
            case '2':
              this.$refs.heightWeight.load();
              break;
            case '3':
              this.$refs.tempMedicine.load();
              break;
            case '4':
              this.$refs.SportArea.load();
              break;
            case '5':
              this.$refs.life.load();
              break;
            case '6':
              this.$refs.evaluate.load();
              break;
            case '7':
              this.$refs.moments.load();
              break;
          }
        })
      })
    },
    // 导出
    handleDownload() {
      // 转换成canvas
      this.exportFlag = true;
      this.spinning = true;
      this.exportList = []
      this.activeKey.push("1","2","3","4","5","6","7")
      this.showActiveKey();
    },
    handleOk(){
      this.exportList.push(true);
      if (this.exportFlag && this.exportList.length == this.activeKey.length) {
        this.spinning = false;
        setTimeout(() => {
          this.exportPng();
        }, 500);
      }
    },
    exportPng(){
      let that = this;
      html2canvas(document.getElementById("reportAreaSem")).then(function (canvas) {
        var img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = that.semesterName + that.className + "幼儿成长档案.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
        that.activeKey = ["1"];
        
      });
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-card-body{
  padding: 10px;

  .ant-card-head-title {
    font-size: 18px;
    font-weight: 600;
  }
}
 
</style>